<template>
    <div class="body">
        <div class="hg_wd_top"></div>

        <div class="hg_wd_listbox">
            <ul class="hg_wd_list">
                <li
                    v-for="(item, index) in datalist"
                    :key="index"
                    @click="turnBlank(2, { typeId: item.typeId, id: item.id })"
                >
                    <h1 v-if="item.cmsFile[0]">
                        <img
                            :src="
                                item.cmsFile[0]
                                    ? item.cmsFile[0].path
                                    : require('@/assets/img/hg/bannerceshi.png')
                            "
                            alt=""
                        />
                    </h1>

                    <div
                        :style="
                            item.cmsFile[0]
                                ? 'margin-left:190px;'
                                : 'margin-left:0;'
                        "
                    >
                        <h2>{{ item.name }}</h2>
                        <h3>
                            {{ item.cmsArticle.content }}
                        </h3>
                    </div>
                </li>
            </ul>

            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[
                    pageSize,
                    pageSize * 2,
                    pageSize * 3,
                    pageSize * 4,
                ]"
                :page-size="pageSize"
                layout=" prev, pager, next, sizes,jumper"
                :total="totalNumber"
                class="pagination"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import appUtil from '~/assets/utils/appUtil';
import { createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('hgModule');
export default {
    name: 'test',
    data() {
        return {
            datalist: [],
            currentPage: 1,
            pageSize: 10,
            totalNumber: 0,
            statenavList: [],
        };
    },
    mounted() {
        this.getdataList(
            1,
            this.pageSize,
            appUtil.GetQueryString('categoryId')
        );
        if (localStorage.urlInfo) {
            this.statenavList = JSON.parse(localStorage.urlInfo);
        }
    },
    methods: {
        ...mapActions(['getdataListsAsync']),
        handleSizeChange(val) {
            this.pageSize = val;
            this.getdataList(
                1,
                this.pageSize,
                appUtil.GetQueryString('categoryId')
            );
        },
        handleCurrentChange(val) {
            this.getdataList(
                val,
                this.pageSize,
                appUtil.GetQueryString('categoryId')
            );
        },
        turnBlank(title, Parameters) {
            appUtil.routerUrl(
                title,
                Parameters,
                this.statenavList[0].title,
                appUtil.GetQueryString('categoryId')
            );
        },
        getdataList(pn, ps, categoryId) {
            this.getdataListsAsync({
                pn,
                ps,
                categoryId,
            }).then((res) => {
                this.totalNumber = res.data.totalNumber;
                this.datalist = res.data.dataList;
                for (let i = 0; i < this.datalist.length; i++) {
                    if (this.datalist[i].cmsArticle) {
                        this.datalist[
                            i
                        ].cmsArticle.content = appUtil.strIntercept(
                            this.datalist[i].cmsArticle.content
                        );
                    }
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.body {
    overflow: hidden;
    width: 1000px;
    margin: 0 auto;
}

.pagination {
    text-align: center;
    margin: 20px auto;
}

.hg_wd_top {
    height: 4px;
    background: #094194;
}

.hg_wd_listbox {
    padding: 21px 42px;

     .el-pager li {
        width: 31px;
        height: 31px;
        background: #ffffff;
        border-radius: 2px;
        border: 1px solid #d9d9d9;
        margin: 0 3px;
        color: rgba(0, 0, 0, 0.65);
        font-weight: normal;
    }
     .el-pager .active {
        background: #4490ff;
        color: #fff;
    }
     .el-pagination button {
        width: 31px;
        font-weight: normal;
        height: 31px;
        background: #ffffff;
        border-radius: 2px;
        border: 1px solid #d9d9d9;
        margin: 0 3px;
        color: rgba(0, 0, 0, 0.65);
    }

    .hg_wd_list {
        li:hover div h2 {
            color: #346ed9;
        }
        li {
            height: 116px;
            border-bottom: 1px solid rgba(234, 234, 234, 1);
            padding: 19px 0;
            cursor: pointer;

            h1 {
                width: 170px;
                height: 114px;
                float: left;
                overflow: hidden;

                img {
                    width: 100%;
                }
            }

            div {
                margin-left: 190px;

                h2 {
                    font-size: 19px;
                    font-weight: 600;
                    color: rgba(51, 51, 51, 1);
                    line-height: 26px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                h3 {
                    font-size: 14px;
                    font-weight: 400;
                    color: #666666;
                    line-height: 20px;
                    margin-top: 17px;

                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                }
            }
        }
    }
}
</style>
